<template>
  <div class="breadcrumb-nav">
    <el-breadcrumb separator="/">
      <!-- 数据源层级 -->
      <el-breadcrumb-item>
        <el-button
          type="text"
          :class="{ active: currentLevel === 'datasource' }"
          @click="$emit('navigate', 'datasource')"
        >
          <el-icon><DataBoard /></el-icon>
          数据源
        </el-button>
      </el-breadcrumb-item>

      <!-- 数据库实例层级 -->
      <el-breadcrumb-item v-if="selectedDataSource">
        <el-button
          type="text"
          :class="{ active: currentLevel === 'database' }"
          @click="$emit('navigate', 'database')"
        >
          <el-icon><Coin /></el-icon>
          {{ selectedDataSource.name }}
        </el-button>
      </el-breadcrumb-item>

      <!-- 数据表层级 -->
      <el-breadcrumb-item v-if="selectedDatabase">
        <el-button
          type="text"
          :class="{ active: currentLevel === 'table' }"
          @click="$emit('navigate', 'table')"
        >
          <el-icon><Grid /></el-icon>
          {{ selectedDatabase.name }}
        </el-button>
      </el-breadcrumb-item>

      <!-- 当前选中的表 -->
      <el-breadcrumb-item v-if="selectedTable">
        <span class="current-table">
          <el-icon><Document /></el-icon>
          {{ selectedTable }}
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 操作按钮 -->
    <div class="breadcrumb-actions">
      <el-tooltip content="刷新当前层级">
        <el-button
          size="small"
          :icon="Refresh"
          @click="$emit('refresh')"
          circle
        />
      </el-tooltip>
      
      <el-tooltip content="返回上一层">
        <el-button
          size="small"
          :icon="ArrowLeft"
          @click="handleGoBack"
          :disabled="currentLevel === 'datasource'"
          circle
        />
      </el-tooltip>
    </div>
  </div>
</template>

<script>
import {
  DataBoard,
  Coin,
  Grid,
  Document,
  Refresh,
  ArrowLeft
} from '@element-plus/icons-vue'

export default {
  name: 'BreadcrumbNav',
  components: {
    DataBoard,
    Coin,
    Grid,
    Document,
    Refresh,
    ArrowLeft
  },
  props: {
    currentLevel: {
      type: String,
      required: true
    },
    selectedDataSource: {
      type: Object,
      default: null
    },
    selectedDatabase: {
      type: Object,
      default: null
    },
    selectedTable: {
      type: String,
      default: null
    }
  },
  emits: ['navigate', 'refresh', 'go-back'],
  setup(props, { emit }) {
    const handleGoBack = () => {
      const levelMap = {
        'table': 'database',
        'database': 'datasource'
      }
      
      const previousLevel = levelMap[props.currentLevel]
      if (previousLevel) {
        emit('go-back', previousLevel)
      }
    }

    return {
      handleGoBack
    }
  }
}
</script>

<style scoped>
.breadcrumb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  border-radius: 4px 4px 0 0;
}

:deep(.el-breadcrumb) {
  flex: 1;
}

:deep(.el-breadcrumb__item) {
  display: flex;
  align-items: center;
}

:deep(.el-breadcrumb__inner) {
  font-weight: normal;
}

.el-button {
  padding: 4px 8px;
  border: none;
  background: transparent;
  color: #606266;
  transition: all 0.2s;
}

.el-button:hover {
  color: #409eff;
  background-color: #ecf5ff;
}

.el-button.active {
  color: #409eff;
  font-weight: 600;
}

.current-table {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #303133;
  font-weight: 600;
}

.breadcrumb-actions {
  display: flex;
  gap: 8px;
  margin-left: 16px;
}

.breadcrumb-actions .el-button {
  padding: 6px;
  color: #909399;
}

.breadcrumb-actions .el-button:hover {
  color: #409eff;
}

.breadcrumb-actions .el-button:disabled {
  color: #c0c4cc;
  cursor: not-allowed;
}

.breadcrumb-actions .el-button:disabled:hover {
  color: #c0c4cc;
  background: transparent;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .breadcrumb-nav {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  
  .breadcrumb-actions {
    margin-left: 0;
    justify-content: center;
  }
}
</style>